<template>
  <div style="height: 70%">
    <!-- 头部 -->
    <div class="login">
      <el-row>
        <el-col :span="12">
          <!-- 登录文字 -->
          <div class="login-wen">
            <div style="font-size: 40px">您好，欢迎登录</div>
            <div style="font-size: 20px;margin-top:10px">桥梁在线数字桥梁博物馆</div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="login-deng">
            <!-- 登录框 -->
            <el-form
              ref="loginForm"
              :model="loginForm"
              :rules="loginRules"
              class="login-form"
            >
              <h3 class="title">密码登录</h3>
              <el-form-item prop="username">
                <p>用户名：</p>
                <el-input
                  v-model="loginForm.username"
                  type="text"
                  placeholder="请输入账户用户名"
                  auto-complete="off"
                >
                  <!-- <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" /> -->
                </el-input>
              </el-form-item>
              <el-form-item prop="password">
                <p>密码：</p>
                <el-input
                  v-model="loginForm.password"
                  type="password"
                  placeholder="请输入密码"
                  auto-complete="off"
                  @keyup.enter.native="handleLogin"
                >
                  <!-- <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" /> -->
                </el-input>
              </el-form-item>
              <!-- <el-form-item prop="code" v-if="captchaEnabled">
                <p>验证码：</p>
                <el-input
                  v-model="loginForm.code"
                  auto-complete="off"
                  placeholder="请输入右侧验证码的计算结果"
                  style="width: 63%"
                  @keyup.enter.native="handleLogin"
                >
                </el-input>
                <div class="login-code">
                  <img :src="codeUrl" @click="getCode" class="login-code-img" />
                </div>
              </el-form-item> -->
              <el-form-item label="">
                <div
                  class="sncaptcha-init-button"
                  id="captcha-button"
                  style="width: 100%; height: 40px; line-height: 40px"
                  v-show="loginForm.username && loginForm.password && !captchaResult"
                >
                  <img
                    class="sncaptcha-init-button-logo"
                    src=" "
                  /><span class="sncaptcha-init-button-text">点击按钮进行验证</span>
                </div>
                <div
                  class="sncaptcha-init-button sncaptcha-init-button-completed"
                  id="iar1_sncaptcha_button"
                  style="width: 100%; height: 40px; line-height: 40px; cursor: default"
                  v-show="captchaResult"
                >
                  <img
                    class="sncaptcha-init-button-logo"
                    src=" "
                  /><span class="sncaptcha-init-button-text">完成验证</span>
                </div>
              </el-form-item>

              <div id="captcha-element"></div>
              <el-checkbox v-model="loginForm.rememberMe">记住密码</el-checkbox>
              <el-form-item style="width: 100%; text-align: center; margin-bottom: 15px">
                <el-button
                  id="captcha-button"
                  :loading="loading"
                  type="primary"
                  class="login-load"
                  @click.native.prevent="handleLogin"
                >
                  <span v-if="!loading">登 录</span>
                  <span v-else>登 录 中...</span>
                </el-button>
                <!--        <div style="float: right;" v-if="register">-->
                <!--          <router-link class="link-type" :to="'/register'">立即注册</router-link>-->
                <!--        </div>-->
              </el-form-item>
            </el-form>
          </div>
        </el-col>
      </el-row>
    </div>

    <!--  底部  -->
    <div class="el-login-footer">
      <div>
        <el-row style="padding-top:20px">
          <el-col :span="12" :offset="6">
            <div class="">
              <el-row>
                <el-col :span="12">
                  <div class="">
                    <div class="footer-wiget wow footer-wiget1">
                      <div class="footer-wiget-title">
                        <h4 style="margin-bottom:0px">
                          <img style="width:60%"
                            class="bottomLogol"
                            src="../assets/images/bottomLogol.png"
                            alt=""
                          />
                        </h4>
                      </div>
                      <div class="footer-wiget-menu">
                        <ul style="margin:0px">
                          <li>
                            <a
                              ><img style="width:80%"  class="pb-10" src="../assets/images/about.png" alt=""
                            /></a>
                          </li>
                          <li>
                            <a href="#"
                              ><i class="glyphicon glyphicon-font"></i>联系邮箱</a
                            >|<span>lixuyang@bucea.edu.cn</span>
                          </li>
                          <li>
                            <a href="#">主办单位</a>|<span>北京艺筑科技有限公司</span>
                          </li>
                          <li>
                            <a href="#">学术支持单位</a>|<span
                              >北京建筑大学古桥研究院</span
                            >
                          </li>
                          <li>
                            <a href="#"> 内容指导单位</a>|<span
                              >北京茅以升科技教育基金会</span
                            >
                          </li>
                          <li><a href="#"> 法律顾问</a>|<span>北京市康达律师事务所&nbsp;&nbsp;张伯阳律师</span></li>
                          <li><a href="#"> 项目支持单位</a>|<span>北京文化艺术基金</span></li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="">
                    <div class="footer-wiget wow pt-35">
                      <div class="footer-wiget-title pb-10">
                        <h4 style="margin-bottom:0px"><img style="width:28%" src="../assets/images/erweima.png" alt="" /></h4>
                      </div>
                      <div class="footer-wiget-menu">
                        <ul style="padding-left:0px">
                          <li>北京古桥</li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
      </div>
      <p class="pt-20 footer-own">
        Copyright2023 桥梁在线数字桥梁博物馆 All Rights Reserved<span
          ><a
            class="gongan"
            href="https://beian.mps.gov.cn/#/query/webSearch?code=11010202010808"
            target="_blank"
            ><img src="../assets/images/bei.png" alt="" />京公网安备11010202010808号</a
          > </span
        >京ICP备202300768号-2 思源黑体、思源宋体字体免费公益授权
        建议使用360极速、Chrome、Firefox浏览器，最佳分辨率1920×1080
      </p>
      <p class="footer-own footer-ali">
        <img style="width: 50px" src="../assets/images/ali.png" alt="" /><span
          >本网站由阿里云提供云计算及安全服务</span
        >|<span>本网站支持</span
        ><span style="padding-left: 0px; vertical-align: middle"
          ><img src="../assets/images/iphone.png" alt="" /></span
        >| <span>Powered by CloudDream</span>
      </p>
    </div>
  </div>
</template>

<script>
import { getCodeImg, captchaVerify } from "@/api/login";
import Cookies from "js-cookie";
import { encrypt, decrypt } from "@/utils/jsencrypt";

export default {
  name: "Login",
  data() {
    return {
      codeUrl: "",
      loginForm: {
        username: "",
        password: "",
        rememberMe: false,
        code: "",
        uuid: "",
      },
      loginRules: {
        username: [
          {
            required: true,
            trigger: "blur",
            message: "请输入您的账号",
          },
        ],
        password: [
          {
            required: true,
            trigger: "blur",
            message: "请输入您的密码",
          },
        ],
        code: [
          {
            required: true,
            trigger: "change",
            message: "请输入验证码",
          },
        ],
      },
      loading: false,
      // 验证码开关
      captchaEnabled: false,
      // 注册开关
      register: false,
      redirect: undefined,
      captcha: null,
      captchaButton: null,
      captchaResult: false,
    };
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true,
    },
  },
  created() {
    // this.getCode();
    this.getCookie();

    this.captchaButton = document.getElementById("captcha-button");
    window.initAliyunCaptcha({
      SceneId: "b8fqt3k7", // 场景ID。根据步骤二新建验证场景后，您可以在验证码场景列表，获取该场景的场景ID
      prefix: "az3raj", // 身份标。开通阿里云验证码2.0后，您可以在控制台概览页面的实例基本信息卡片区域，获取身份标
      mode: "popup", // 验证码模式。popup表示要集成的验证码模式为弹出式。无需修改
      element: "#captcha-element", // 页面上预留的渲染验证码的元素，与原代码中预留的页面元素保持一致。
      button: "#captcha-button", // 触发验证码弹窗的元素。button表示单击登录按钮后，触发captchaVerifyCallback函数。您可以根据实际使用的元素修改element的值
      captchaVerifyCallback: this.captchaVerifyCallback, // 业务请求(带验证码校验)回调函数，无需修改
      onBizResultCallback: this.onBizResultCallback, // 业务请求结果回调函数，无需修改
      getInstance: this.getInstance, // 绑定验证码实例函数，无需修改
      slideStyle: {
        width: 360,
        height: 40,
      }, // 滑块验证码样式，支持自定义宽度和高度，单位为px。其中，width最小值为320 px
      language: "cn", // 验证码语言类型，支持简体中文（cn）、繁体中文（tw）、英文（en）
    });
  },
  beforeUnmount() {
    this.captchaButton = null;
    // 必须删除相关元素，否则再次mount多次调用 initAliyunCaptcha 会导致多次回调 captchaVerifyCallback
    document.getElementById("aliyunCaptcha-mask")?.remove();
    document.getElementById("aliyunCaptcha-window-popup")?.remove();
  },
  methods: {
    getInstance(instance) {
      this.captcha = instance;
    },
    async captchaVerifyCallback(captchaVerifyParam) {
      let res = await captchaVerify({ captchaVerifyParam });
      if (res.code == 200) {
        console.log(res);
        this.captchaResult = res.data;
        return {
          captchaResult: res.data,
          bizResult: true,
        };
      } else {
        return {
          captchaResult: false,
          bizResult: false,
        };
      }
      // console.log("*****", captchaVerifyParam);
      // 1.向后端发起业务请求，获取验证码验证结果和业务结果
      // const result = await xxxx('http://您的业务请求地址', {
      //     captchaVerifyParam: captchaVerifyParam, // 验证码参数
      //     yourBizParam... // 业务参数
      // });
      // return {
      //  captchaResult: true, // 验证码验证是否通过，boolean类型，必选
      //  bizResult: true, // 业务验证是否通过，boolean类型，可选；若为无业务验证结果的场景，bizResult可以为空
      // }
    },
    // 验证通过后调用
    onBizResultCallback() {
      this.captchaButton = null;
      // 必须删除相关元素，否则再次mount多次调用 initAliyunCaptcha 会导致多次回调 captchaVerifyCallback
      document.getElementById("aliyunCaptcha-mask")?.remove();
      document.getElementById("aliyunCaptcha-window-popup")?.remove();
    },
    getCode() {
      getCodeImg().then((res) => {
        this.captchaEnabled =
          res.captchaEnabled === undefined ? true : res.captchaEnabled;
        if (this.captchaEnabled) {
          this.codeUrl = "data:image/gif;base64," + res.img;
          this.loginForm.uuid = res.uuid;
        }
      });
    },
    getCookie() {
      const username = Cookies.get("username");
      const password = Cookies.get("password");
      const rememberMe = Cookies.get("rememberMe");
      this.loginForm = {
        username: username === undefined ? this.loginForm.username : username,
        password: password === undefined ? this.loginForm.password : decrypt(password),
        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
      };
    },
    handleLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          if (!this.captchaResult) {
            return this.$modal.msgError("为了你的账户安全，请点击按钮完成验证。");
          }

          this.loading = true;
          if (this.loginForm.rememberMe) {
            Cookies.set("username", this.loginForm.username, {
              expires: 30,
            });
            Cookies.set("password", encrypt(this.loginForm.password), {
              expires: 30,
            });
            Cookies.set("rememberMe", this.loginForm.rememberMe, {
              expires: 30,
            });
          } else {
            Cookies.remove("username");
            Cookies.remove("password");
            Cookies.remove("rememberMe");
          }
          this.$store
            .dispatch("Login", this.loginForm)
            .then(() => {
              this.$router
                .push({
                  path: this.redirect || "/",
                })
                .catch(() => {});
            })
            .catch(() => {
              this.loading = false;
              if (this.captchaEnabled) {
                this.getCode();
              }
            });
        }
      });
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss">
.login {
  // display: flex;
  // justify-content: center;
  // align-items: center;
  height: 100%;
  background-image: url("../assets/images/login-background.png");
  background-size: 100% 100%;
}
.login-deng p {
  margin: 0px;
  height: 20px;
  line-height: 20px;
}
.title {
  margin: 0px auto 10px auto;
  border-bottom: 4px solid rgba(214, 157, 73, 1);
  width: 80px;
  margin: initial;
  margin-bottom: 25px;
  color: #707070;
}

.login-load {
  background: rgba(214, 157, 73, 1);
  border: rgba(214, 157, 73, 1);
}
.login-load:hover {
  background: rgba(214, 157, 73, 1);
  border: rgba(214, 157, 73, 1);
}

.login-form {
  border-radius: 6px;
  background: #ffffff;
  width: 400px;
  padding: 20px 25px 5px 25px;
  box-shadow: 0px 4px 20px 0px rgba(25, 26, 85, 0.12);

  .el-input {
    height: 30px;
    line-height: 30px;
    border: 0px;
    border-radius: 0px;
    border-bottom: 1px solid rgba(207, 211, 227, 1);

    input {
      height: 30px;
      line-height: 30px;
      border: 0px;
      border-radius: 0px;
      border-bottom: 1px solid rgba(207, 211, 227, 1);
    }
  }

  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 2px;
  }
}

.login-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}

.login-code {
  width: 33%;
  height: 38px;
  float: right;

  img {
    cursor: pointer;
    vertical-align: middle;
  }
}

.el-login-footer {
  height: 290px;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #503000;
  font-family: Arial;
  font-size: 12px;
  letter-spacing: 1px;
  background-image: url("../assets/images/footer.png");
  background-size: 100% 100%;
}

.login-code-img {
  height: 38px;
}

.login-wen {
  text-align: center;
  margin-top: 25%;
  color: #513100;
}

.login-deng {
  margin-top: 15%;
}

.footer-wiget-text h4 {
  margin: 25px 0 22px;
  font-size: 16px;
  line-height: 28px;
  color: #ffffff;
  font-weight: 400;
}

.footer-wiget-menu ul {
  list-style: none;
}

.footer-wiget-menu ul li {
  list-style: none;
  margin-top: 0px;
}

.footer-wiget-menu ul li a {
  display: inline-block;
  text-decoration: none;
  font-size: 12px;
  transition: 0.5s;
  margin: 0;
  line-height: 20px;
  color: rgba(80, 48, 0, 1);
  font-weight: 700;
  padding-right: 10px;
}

.footer-wiget-menu ul li span {
  padding-left: 10px;
}

.footer-wiget1 {
  border-right: 1px solid #503000;
}

/* .footer-wiget-menu ul li :hover {
    color: #a3c914;
    margin-left: 10px;
} */

.footer-wiget-menu ul li a i {
  color: #a3c914;
}

.footer-ali {
  margin-top: 5px;
}

.footer-ali span {
  padding: 10px;
  font-size: 12px;
}

.footer-own {
  margin: 0px;
}

.gongan {
  text-decoration: none;
  font-size: 12px;
  color: #2562c9;
  padding-left: 8px;
}

.gongan img {
  width: 15px;
}

.bottomLogol {
  width: 70%;
}
.el-checkbox__input.is-checked + .el-checkbox__label {
  color: #000;
}
.el-checkbox__input.is-checked .el-checkbox__inner {
  background: rgba(214, 157, 73, 1);
  border: rgba(214, 157, 73, 1);
}
.sncaptcha-init-button {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 2px;
  background: #f3f3f3;
  background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#fff),
    to(#f1f1f1)
  );
  background-image: linear-gradient(180deg, #fff, #f1f1f1);
  color: #666;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  display: inline-block;
  font-size: 14px;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -moz-user-select: none;
  border: 1px solid #ccc;
  min-height: 20px;
}
.sncaptcha-init-button-logo {
  float: none;
  position: unset;
  margin-right: 5px;
  margin-top: -3px;
  height: 20px;
  width: 20px;
  vertical-align: middle;
}
.sncaptcha-init-button-completed {
  background-color: #cffae1;
  border-color: #2bd02b;
  color: #238823;
  -webkit-transition: color 0.5s ease;
  transition: color 0.5s ease;
}
</style>
